<template>
  <view :class="[ns.b()]">
    <u-icon
      :class="[ns.e('icon')]"
      v-if="icon"
      :name="icon"
      :color="iconColor"
    />
    <u-input
      :class="[ns.e('text')]"
      v-bind="$attrs"
      v-model="value"
      :placeholder-style="`color: ${placeholderStyle}`"
      :custom-style="{ color: 'white' }"
    />
  </view>
</template>
<script>
export default {
  name: 'DmsInput',
};
</script>
<script setup>
import { computed } from 'vue';

import { useNamespace } from '@dms/hooks';
const ns = useNamespace('input');

const props = defineProps({
  icon: {
    type: String,
    default: '',
  },
  iconColor: {
    type: String,
    default: '#2D2F5A',
  },
  modelValue: {
    type: String,
    default: '',
  },
  placeholderStyle: {
    type: String,
    default: '#2D3169',
  },
});
const emit = defineEmits('update:modelValue');

const value = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  },
});
</script>
